<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectPantone.js">
        </script>
        <script type="text/javascript">
            var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
            var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
            
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            var ctCostumeTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtCostumeType');
            
            var idValue = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            
            var piOrderForm
            var piOrderStore;
            var piOrderGrid;
            
            var currentPantonInput;
            var selectPantoneCallback = function(pantone, realColor){
                document.getElementById('pantoneNumber' + currentPantonInput).value = pantone;
                document.getElementById('realColor' + currentPantonInput).value = realColor;
                document.getElementById('sampleTable' + currentPantonInput).style['backgroundColor'] = '#' + realColor;
            }
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var piXMLReader = new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                    name: 'id',
                    mapping: 'id'
                }, {
                    name: 'ctProductFamily',
                    mapping: 'ctProductFamily'
                }, {
                    name: 'ctMachineType',
                    mapping: 'ctMachineType'
                }, {
                    name: 'type',
                    mapping: 'type'
                }, {
                    name: 'orderNumber',
                    mapping: 'orderNumber'
                }, {
                    name: 'yarnNumber',
                    mapping: 'yarnNumber'
                }, {
                    name: 'ctDesignType',
                    mapping: 'ctDesignType'
                }, {
                    name: 'style',
                    mapping: 'style'
                }, {
                    name: 'customerLinkman',
                    mapping: 'customerLinkman'
                }, {
                    name: 'model',
                    mapping: 'model'
                }, {
                    name: 'ctSeasonNumber',
                    mapping: 'ctSeasonNumber'
                }, {
                    name: 'reference',
                    mapping: 'reference'
                }, {
                    name: 'createDate',
                    mapping: 'createDate'
                }, {
                    name: 'ctVersion',
                    mapping: 'ctVersion'
                }, {
                    name: 'patronageNumer',
                    mapping: 'patronageNumer'
                }, {
                    name: 'front',
                    mapping: 'front'
                }, {
                    name: 'back',
                    mapping: 'back'
                }, {
                    name: 'sleeves',
                    mapping: 'sleeves'
                }, {
                    name: 'bottomThrum',
                    mapping: 'bottomThrum'
                }, {
                    name: 'sleevesThrum',
                    mapping: 'sleevesThrum'
                }, {
                    name: 'necklineThrum',
                    mapping: 'necklineThrum'
                }, {
                    name: 'needle',
                    mapping: 'needle'
                }, {
                    name: 'weight',
                    mapping: 'weight'
                }, {
                    name: 'comment',
                    mapping: 'comment'
                }, {
                    name: 'customerID',
                    mapping: 'customerID'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'biMeasureSpecificationId',
                    mapping: 'biMeasureSpecificationId'
                }, {
                    name: 'biMeasureSpecificationName',
                    mapping: 'biMeasureSpecificationName'
                }, {
                    name: 'yarnName',
                    mapping: 'yarnName'
                }, {
                    name: 'frontPhotoName',
                    mapping: 'frontPhotoName'
                }, {
                    name: 'backPhotoName',
                    mapping: 'backPhotoName'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'ctCollarType',
                    mapping: 'ctCollarType'
                }, {
                    name: 'customerName',
                    mapping: 'customerName'
                }, {
                    name: 'customerDepartment',
                    mapping: 'customerDepartment'
                }]);
                
                var piXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=11&id=' + idValue);
                
                var piRecord = piXMLReader.readRecords(piXmlLoader.getXml()).records[0];
                
                var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
										 '<tr><td style="background:#eeeeee; width: 15%;">',
										 message.get('message.list.id'), '</td><td>{id}</td>', 
										 '<td style="background:#eeeeee;width: 15%;">', 
										 piMessage.get('ui.productidentification.style'), 
										 '</td><td>{style}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.seasonnumber'), 
										 '</td><td>{ctSeasonNumber}</td>', '<td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.reference'), 
										 '</td><td>{reference}</td></tr>', 
										 
										 
										 '<tr><td style="background:#eeeeee;">', 
										 message.get('message.edit.productfamily'), 
										 '</td><td>{ctProductFamily}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.patronagenumer'), 
										 '</td><td>{patronageNumer}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.chartversion'), 
										 '</td><td>{ctVersion}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.model'), 
										 '</td><td>{model}</td></tr>',
										 '<tr><td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.weight'), 
										 '</td><td>{weight}</td><td style="background:#eeeeee;">', 
										 message.get('message.edit.collar'), 
										 '</td><td>{ctCollarType}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.name'), 
										 '</td><td>{customerName}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.department'), 
										 '</td><td>{customerDepartment}</td></tr>',
										 
										 '<tr><td colspan="8">',
										 //'<img width="120" src="../../_temp/{frontPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 //'<img width="120" src="../../_temp/{backPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{chartName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{photoName}"/>',
										 '</td></tr>',
										 '</tbody></table>'];
                var itemTpl = new Ext.Template(itemTplMarkup);
                itemTpl.append('productIdentification', piRecord.data);
                
                piOrderForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/OrderServlet?action=1',
                    frame: true,
                    title: orderMessage.get('ui.order.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 70,
					collapsible: true,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'pantoneNumber',
                        mapping: 'pantoneNumber'
                    }, {
                        name: 'colorNumber',
                        mapping: 'colorNumber'
                    }, {
                        name: 'realColor',
                        mapping: 'realColor'
                    }, {
                        name: 'customerColor',
                        mapping: 'customerColor'
                    }, {
                        name: 'factoryColor',
                        mapping: 'factoryColor'
                    }, {
                        name: 'amountS',
                        mapping: 'amountS'
                    }, {
                        name: 'amountM',
                        mapping: 'amountM'
                    }, {
                        name: 'amountL',
                        mapping: 'amountL'
                    }, {
                        name: 'amountXl',
                        mapping: 'amountXl'
                    }, {
                        name: 'amountXxl',
                        mapping: 'amountXxl'
                    }, {
                        name: 'amountXxxl',
                        mapping: 'amountXxxl'
                    }, {
                        name: 'total',
                        mapping: 'total'
                    }, {
                        name: 'colorA',
                        mapping: 'colorA'
                    }, {
                        name: 'pantoneNumberA',
                        mapping: 'pantoneNumberA'
                    }, {
                        name: 'realColorA',
                        mapping: 'realColorA'
                    }, {
                        name: 'percentageA',
                        mapping: 'percentageA'
                    }, {
                        name: 'colorB',
                        mapping: 'colorB'
                    }, {
                        name: 'pantoneNumberB',
                        mapping: 'pantoneNumberB'
                    }, {
                        name: 'realColorB',
                        mapping: 'realColorB'
                    }, {
                        name: 'percentageB',
                        mapping: 'percentageB'
                    }, {
                        name: 'colorC',
                        mapping: 'colorC'
                    }, {
                        name: 'pantoneNumberC',
                        mapping: 'pantoneNumberC'
                    }, {
                        name: 'realColorC',
                        mapping: 'realColorC'
                    }, {
                        name: 'percentageC',
                        mapping: 'percentageC'
                    }, {
                        name: 'colorD',
                        mapping: 'colorD'
                    }, {
                        name: 'pantoneNumberD',
                        mapping: 'pantoneNumberD'
                    }, {
                        name: 'realColorD',
                        mapping: 'realColorD'
                    }, {
                        name: 'percentageD',
                        mapping: 'percentageD'
                    }, {
                        name: 'colorE',
                        mapping: 'colorE'
                    }, {
                        name: 'pantoneNumberE',
                        mapping: 'pantoneNumberE'
                    }, {
                        name: 'realColorE',
                        mapping: 'realColorE'
                    }, {
                        name: 'percentageE',
                        mapping: 'percentageE'
                    }, {
                        name: 'colorF',
                        mapping: 'colorF'
                    }, {
                        name: 'pantoneNumberF',
                        mapping: 'pantoneNumberF'
                    }, {
                        name: 'realColorF',
                        mapping: 'realColorF'
                    }, {
                        name: 'percentageF',
                        mapping: 'percentageF'
                    }, {
                        name: 'colorG',
                        mapping: 'colorG'
                    }, {
                        name: 'pantoneNumberG',
                        mapping: 'pantoneNumberG'
                    }, {
                        name: 'realColorG',
                        mapping: 'realColorG'
                    }, {
                        name: 'percentageG',
                        mapping: 'percentageG'
                    }, {
                        name: 'colorH',
                        mapping: 'colorH'
                    }, {
                        name: 'pantoneNumberH',
                        mapping: 'pantoneNumberH'
                    }, {
                        name: 'realColorH',
                        mapping: 'realColorH'
                    }, {
                        name: 'percentageH',
                        mapping: 'percentageH'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'piId',
                        name: 'piId',
                        xtype: 'hidden',
                        value: piRecord.data.id
                    }, {
                        id: 'realColor',
                        name: 'realColor',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorA',
                        name: 'realColorA',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorB',
                        name: 'realColorB',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorC',
                        name: 'realColorC',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorD',
                        name: 'realColorD',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorE',
                        name: 'realColorE',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorF',
                        name: 'realColorF',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorG',
                        name: 'realColorG',
                        xtype: 'hidden'
                    }, {
                        id: 'realColorH',
                        name: 'realColorH',
                        xtype: 'hidden'
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        title: orderMessage.get('ui.order.set1'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
                                    id: 'colorNumber',
                                    name: 'colorNumber',
                                    fieldLabel: orderMessage.get('ui.order.color'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
                                    name: 'pantoneNumber',
                                    id: 'pantoneNumber',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
//                                    allowBlank: false,
//                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumber').getEl().on('click', function(){
                                                    currentPantonInput = '';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTable" width="60" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
									id: 'customerColor',
	                                name: 'customerColor',
	                                fieldLabel: colorMessage.get('ui.pantonecolor.customercolor'),
	                                xtype: 'textfield',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64
	                            }]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
									id: 'factoryColor',
	                                name: 'factoryColor',
	                                fieldLabel: colorMessage.get('ui.pantonecolor.factorycolor'),
	                                xtype: 'textfield',
	                               	anchor: '86%',
									width: '90%',
	                                maxLength: 64
	                            }]
                            }]
                        }, {
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorA',
                                    name: 'colorA',
                                    fieldLabel: orderMessage.get('ui.order.colora'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberA',
                                    name: 'pantoneNumberA',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberA').getEl().on('click', function(){
                                                    currentPantonInput = 'A';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageA',
                                    name: 'percentageA',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableA" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
                        } ,{
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorB',
                                    name: 'colorB',
                                    fieldLabel: orderMessage.get('ui.order.colorb'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberB',
                                    name: 'pantoneNumberB',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberB').getEl().on('click', function(){
                                                    currentPantonInput = 'B';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageB',
                                    name: 'percentageB',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableB" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
                        }, {
							layout: 'column',
							items: [{
								columnWidth: .25,
								layout: 'form',
								items: [{
									id: 'colorC',
									name: 'colorC',
									fieldLabel: orderMessage.get('ui.order.colorc'),
									xtype: 'textfield',
									anchor: '86%',
									maxLengthText: message.get('message.edit.toolong'),
									maxLength: 64
								}]
							}, {
								columnWidth: .25,
								layout: 'form',
								items: [{
									id: 'pantoneNumberC',
									name: 'pantoneNumberC',
									fieldLabel: orderMessage.get('ui.order.pantone'),
									xtype: 'textfield',
									anchor: '86%',
									maxLengthText: message.get('message.edit.toolong'),
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
									maxLength: 64,
									listeners: {
										'render': {
											fn: function(){
												Ext.getCmp('pantoneNumberC').getEl().on('click', function(){
													currentPantonInput = 'C';
													selectPantone();
												}, this);
											},
											scope: this
										}
									}
								}]
							}, {
								columnWidth: .25,
								layout: 'form',
								items: [{
									id: 'percentageC',
									name: 'percentageC',
									fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
									xtype: 'numberfield',
									anchor: '86%',
									maxLengthText: message.get('message.edit.toolong'),
									maxLength: 64
								}]
							}, {
								columnWidth: .25,
								layout: 'form',
								items: [{
									html: '<table><tr><td width="65">' +
									orderMessage.get('ui.order.realcolor') +
									': </td><td><table id="sampleTableC" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
								}]
							}]
						},{
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorD',
                                    name: 'colorD',
                                    fieldLabel: orderMessage.get('ui.order.colord'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberD',
                                    name: 'pantoneNumberD',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberD').getEl().on('click', function(){
                                                    currentPantonInput = 'D';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageD',
                                    name: 'percentageD',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableD" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
                        }, {
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorE',
                                    name: 'colorE',
                                    fieldLabel: orderMessage.get('ui.order.colore'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberE',
                                    name: 'pantoneNumberE',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberE').getEl().on('click', function(){
                                                    currentPantonInput = 'E';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageE',
                                    name: 'percentageE',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableE" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]},{
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorF',
                                    name: 'colorF',
                                    fieldLabel: orderMessage.get('ui.order.colorf'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberF',
                                    name: 'pantoneNumberF',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberF').getEl().on('click', function(){
                                                    currentPantonInput = 'F';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageF',
                                    name: 'percentageF',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableF" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
                        }, {
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorG',
                                    name: 'colorG',
                                    fieldLabel: orderMessage.get('ui.order.colorg'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberG',
                                    name: 'pantoneNumberG',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberG').getEl().on('click', function(){
                                                    currentPantonInput = 'G';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageG',
                                    name: 'percentageG',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableG" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
							},{
                            layout: 'column',
                            items: [{
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'colorH',
                                    name: 'colorH',
                                    fieldLabel: orderMessage.get('ui.order.colorh'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'pantoneNumberH',
                                    name: 'pantoneNumberH',
                                    fieldLabel: orderMessage.get('ui.order.pantone'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									readOnly: true,
									emptyText: message.get('message.combo.pleaseselect'),
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumberH').getEl().on('click', function(){
                                                    currentPantonInput = 'H';
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    id: 'percentageH',
                                    name: 'percentageH',
                                    fieldLabel: orderMessage.get('ui.order.precentage') + '(%)',
                                    xtype: 'numberfield',
                                    anchor: '86%',
                                    maxLengthText: message.get('message.edit.toolong'),
                                    maxLength: 64
                                }]
                            }, {
                                columnWidth: .25,
                                layout: 'form',
                                items: [{
                                    html: '<table><tr><td width="65">' +
                                    orderMessage.get('ui.order.realcolor') +
                                    ': </td><td><table id="sampleTableH" width="40" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                            }]
                        }]
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        title: orderMessage.get('ui.order.set2'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountS',
                                    name: 'amountS',
                                    fieldLabel: 'S',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountM',
                                    name: 'amountM',
                                    fieldLabel: 'M',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountL',
                                    name: 'amountL',
                                    fieldLabel: 'L',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountXl',
                                    name: 'amountXl',
                                    fieldLabel: 'XL',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountXxl',
                                    name: 'amountXxl',
                                    fieldLabel: 'XXL',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .16,
                                layout: 'form',
                                items: [{
                                    id: 'amountXxxl',
                                    name: 'amountXxxl',
                                    fieldLabel: 'XXXL',
                                    xtype: 'numberfield',
                                    value: 0,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }]
                        }]
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (piOrderForm.getForm().isValid()) {
                            
                                piOrderForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
										piOrderStore.reload();
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
										document.getElementById('sampleTable').style['backgroundColor'] = '';
										document.getElementById('sampleTableA').style['backgroundColor'] = '';
										document.getElementById('sampleTableB').style['backgroundColor'] = '';
										document.getElementById('sampleTableC').style['backgroundColor'] = '';
										document.getElementById('sampleTableD').style['backgroundColor'] = '';
										document.getElementById('sampleTableE').style['backgroundColor'] = '';
										document.getElementById('sampleTableF').style['backgroundColor'] = '';
										document.getElementById('sampleTableG').style['backgroundColor'] = '';
										document.getElementById('sampleTableH').style['backgroundColor'] = '';
                                        piOrderForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
							document.getElementById('sampleTable').style['backgroundColor'] = '';
							document.getElementById('sampleTableA').style['backgroundColor'] = '';
							document.getElementById('sampleTableB').style['backgroundColor'] = '';
							document.getElementById('sampleTableC').style['backgroundColor'] = '';
							document.getElementById('sampleTableD').style['backgroundColor'] = '';
							document.getElementById('sampleTableE').style['backgroundColor'] = '';
							document.getElementById('sampleTableF').style['backgroundColor'] = '';
							document.getElementById('sampleTableG').style['backgroundColor'] = '';
							document.getElementById('sampleTableH').style['backgroundColor'] = '';
                            piOrderForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'product_identification_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'product_identification_list.html';
                            }
                        }
                    }]
                });
                
                
                piOrderForm.render('productIdentificationOrderForm');
                
                piOrderStore = new Ext.data.GroupingStore({
                    url: '../../servlet/OrderServlet?action=5&id=' + piRecord.data.id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['index', 'id', 'pantoneNumber', 'colorNumber', 'realColor', 
						{
							name: 'amountS',
							type: 'int'
						}, {
							name: 'amountM',
							type: 'int'
						}, {
							name: 'amountL',
							type: 'int'
						}, {
							name: 'amountXl',
							type: 'int'
						}, {
							name:'amountXxl',
							type: 'int'
						}, {
							name:'amountXxxl',
							type: 'int'
						}, {
							name:'total',
							type: 'int'
						}, 
						'colorA', 'pantoneNumberA', 'realColorA', 'percentageA', 
						'colorB', 'pantoneNumberB', 'realColorB', 'percentageB', 
						'colorC', 'pantoneNumberC', 'realColorC', 'percentageC', 
						'colorD', 'pantoneNumberD', 'realColorD', 'percentageD', 
						'colorE', 'pantoneNumberE', 'realColorE', 'percentageE', 
						'colorF', 'pantoneNumberF', 'realColorF', 'percentageF', 
						'colorG', 'pantoneNumberG', 'realColorG', 'percentageG', 
						'colorH', 'pantoneNumberH', 'realColorH', 'percentageH']),
                    
                   	groupField: 'index',
                    sortInfo: {
                        field: 'index',
                        direction: "ASC"
                    }
                });
				
                var summary = new Ext.grid.GroupSummary();
                piOrderGrid = new Ext.grid.GridPanel({
                    title: orderMessage.get('ui.order.listtitle'),
                    store: piOrderStore,
                    stripeRows: true,
                    height: 360,
                    columns: [{
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    },{
                        id: 'colorNumber',
                        header: orderMessage.get('ui.order.color'),
                        dataIndex: 'colorNumber',
						groupable: false,
						summaryRenderer: function(v, params, data){
		                    return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
		                }
                    },{
                        header: 'S',
                        dataIndex: 'amountS',
                        sortable: false,
						align: 'right',
						groupable: false,
						summaryType:'sum'
                    },{
                        header: 'M',
                        dataIndex: 'amountM',
                        sortable: false,
						align: 'right',
						groupable: false,
						summaryType:'sum'
                    },{
                        header: 'L',
                        dataIndex: 'amountL',
                        sortable: false,
						align: 'right',
						groupable: false,
						summaryType:'sum'
                    },{
                        header: 'XL',
                        dataIndex: 'amountXl',
                        sortable: false,
						align: 'right',
						groupable: false,
						summaryType:'sum'
                    },{
                        header: 'XXL',
                        dataIndex: 'amountXxl',
                        sortable: false,
						align: 'right',
						groupable: false,
						summaryType:'sum'
                    },{
                        header: 'XXXL',
						align: 'right',
                        dataIndex: 'amountXxxl',
                        sortable: false,
						groupable: false,
						summaryType:'sum'
                    },{
                        header: message.get('message.list.total'),
						id: 'total',
                        dataIndex: 'total',
						align: 'right',
						groupable: false,
                        sortable: false,
						summaryType:'sum'
                    },{
                        header: message.get('message.list.eidt'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderDelete
                    }],
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: true,
						enableNoGroups:false,
                        groupTextTpl: '{[values.rs.length]}&nbsp;&nbsp;'
                    }),
                    loadMask: true,
                    plugins: [summary],
                    renderTo: 'orderList'
                });
                
                piOrderStore.load();
                
                function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="Edition" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="Supprimer"/></a>', record.id);
                }
				
				var detailWin;
                piOrderGrid.on('rowdblclick', function(grid, rowIndex, e){
                    if (!detailWin) {
                        detailWin = new Ext.Window({
                            title: message.get('message.window.detail'),
                            layout: 'fit',
                            width: 500,
                            height: 300,
                            closeAction: 'hide',
                            plain: true,
                            items: [{
                                id: 'detailPanel',
                                region: 'center',
                                bodyStyle: {
                                    background: '#ffffff',
                                    padding: '7px'
                                },
                                html: message.get('message.window.empty')
                            }]
                        });
                    }
                    
                    detailWin.show(this);
                    var itemTplMarkup = [
						'<table cellspacing="0" id="the-table"><tbody>',
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colora'),
							'</td><td>{colorA}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberA}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageA}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorA == "" ? "ffffff": values.realColorA]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colorb'),
							'</td><td>{colorB}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberB}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageB}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorB == "" ? "ffffff": values.realColorB]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colorc'),
							'</td><td>{colorC}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberC}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageC}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorC == "" ? "ffffff": values.realColorC]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colord'),
							'</td><td>{colorD}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberD}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageD}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorD == "" ? "ffffff": values.realColorD]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colore'),
							'</td><td>{colorE}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberE}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageE}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorE == "" ? "ffffff": values.realColorE]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colorf'),
							'</td><td>{colorF}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberF}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageF}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorF == "" ? "ffffff": values.realColorF]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colorg'),
							'</td><td>{colorG}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberG}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageG}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorG == "" ? "ffffff": values.realColorG]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.order.colorh'),
							'</td><td>{colorH}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.pantone'),
							'</td><td>{pantoneNumberH}</td>',
							'<td style="background:#eeeeee;">',
							orderMessage.get('ui.order.precentage') +'(%)',
							'</td><td>{percentageH}</td><td>',
							'<table width="100%" bgcolor="#{[values.realColorH == "" ? "ffffff": values.realColorH]}"><tr height="15"><td></td></tr></table>',
							'</td></tr>',
						'</tbody></table>'
					];
                    var itemTpl = new Ext.XTemplate(itemTplMarkup);
                    var detailPanel = Ext.getCmp('detailPanel');
                    itemTpl.overwrite(detailPanel.body, grid.getStore().getAt(rowIndex).data);
                });
            });
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/OrderServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                piOrderStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				document.getElementById('sampleTable').style['backgroundColor'] = '';
				document.getElementById('sampleTableA').style['backgroundColor'] = '';
				document.getElementById('sampleTableB').style['backgroundColor'] = '';
				document.getElementById('sampleTableC').style['backgroundColor'] = '';
				document.getElementById('sampleTableD').style['backgroundColor'] = '';
				document.getElementById('sampleTableE').style['backgroundColor'] = '';
				document.getElementById('sampleTableF').style['backgroundColor'] = '';
				document.getElementById('sampleTableG').style['backgroundColor'] = '';
				document.getElementById('sampleTableH').style['backgroundColor'] = '';
				piOrderForm.getForm().load({
					url:'../../servlet/OrderServlet?action=3&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						if(document.getElementById('realColorA').value != ''){
							document.getElementById('sampleTableA').style['backgroundColor'] = '#' + document.getElementById('realColorA').value;
						}
						
						if(document.getElementById('realColorB').value != ''){
							document.getElementById('sampleTableB').style['backgroundColor'] = '#' + document.getElementById('realColorB').value;
						}
						
						if(document.getElementById('realColorC').value != ''){
							document.getElementById('sampleTableC').style['backgroundColor'] = '#' + document.getElementById('realColorC').value;
						}
						
						if(document.getElementById('realColorD').value != ''){
							document.getElementById('sampleTableD').style['backgroundColor'] = '#' + document.getElementById('realColorD').value;
						}
						
						if(document.getElementById('realColorE').value != ''){
							document.getElementById('sampleTableE').style['backgroundColor'] = '#' + document.getElementById('realColorE').value;
						}
						
						if(document.getElementById('realColorF').value != ''){
							document.getElementById('sampleTableF').style['backgroundColor'] = '#' + document.getElementById('realColorF').value;
						}
						
						if(document.getElementById('realColorG').value != ''){
							document.getElementById('sampleTableG').style['backgroundColor'] = '#' + document.getElementById('realColorG').value;
						}
						
						if(document.getElementById('realColorH').value != ''){
							document.getElementById('sampleTableH').style['backgroundColor'] = '#' + document.getElementById('realColorH').value;
						}
						
					}
				});
			}
        </script>
    </head>
    <body>
        <div id="productIdentification">
        </div>
        <div id="productIdentificationOrderForm">
        </div>
        <div id="orderList">
        </div>
    </body>
</html>
